// ============================== 导入依赖 ============================== //

import * as echarts from 'echarts'

export const COLOR = [
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: '#76C5FF' },
    { offset: 1, color: '#2B74E5' },
  ]),
  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: '#FF8372' },
    { offset: 1, color: '#F3513A' },
  ]),
]

export const COLOR_TOP = ['#A5D7FF', '#FFADA2']

export const COLOR_TEXT = ['#287DEF', '#FF6A55']

// ============================== 导出配置 ============================== //

export default {
  textStyle: {
    color: '#333',
  },
  tooltip: {
    trigger: 'axis',
    confine: true,
  },
  grid: {
    top: 30,
    left: 0,
    right: 0,
    bottom: 0,
    containLabel: true,
  },
  xAxis: {
    data: [],
    axisLine: {
      lineStyle: {
        color: '#999',
      },
    },
    axisPointer: {
      type: 'shadow',
    },
  },
  yAxis: {
    axisLabel: {
      color: '#666',
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#aaa',
      },
    },
    splitLine: {
      lineStyle: {
        color: '#eee',
      },
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    // 背景柱形
    {
      name: '定额',
      type: 'bar',
      barWidth: 20,
      z: 1,
      barGap: '-100%',
      color: '#ECF3FF',
      data: [],
      emphasis: {
        itemStyle: {
          color: '#E6E9ED',
        },
      },
    },
    // 前景柱形
    {
      name: '执行情况',
      type: 'bar',
      barWidth: 20,
      z: 2,
      color: COLOR[0],
      data: [],
    },
    // 被遮挡的背景柱形 (未遮挡的数值置 0)
    {
      tooltip: { show: false },
      type: 'bar',
      barWidth: 20,
      z: 3,
      barGap: '-100%',
      color: 'rgba(230,233,237, 0.5)',
      data: [],
    },
    // 背景顶盖
    {
      tooltip: { show: false },
      type: 'pictorialBar',
      symbolSize: [20, 8],
      symbolOffset: [0, -4],
      z: 4,
      color: 'rgba(229,232,237, 0.7)',
      symbolPosition: 'end',
      data: [],
    },
    // 前景顶盖
    {
      tooltip: { show: false },
      type: 'pictorialBar',
      symbolSize: [20, 8],
      symbolOffset: [0, -4],
      z: 5,
      color: COLOR_TOP[0],
      symbolPosition: 'end',
      data: [],
      label: {
        show: true,
        position: 'top',
        distance: 2,
        fontSize: 16,
        color: COLOR_TEXT[0],
      },
    },
  ],
}
